<template>
  <div>
    <Drawer
      width="50%"
      title="查看详情"
      placement="right"
      v-model:visible="visible"
      :destroy-on-close="true"
      @close="onClose"
    >
      <template #closeIcon>
        <arrow-left-outlined />
      </template>
      <Card>
        <Row>
          <Col span="12">
            <FormItem label="链路名称">{{ linkName }}</FormItem>
          </Col>
          <Col span="12">
            <FormItem label="链路描述">{{ linkDesc }}</FormItem>
          </Col>
        </Row>
        <Row>
          <FormItem label="链路key">{{ routeLinkKey }}</FormItem>
        </Row>
      </Card>
      <Card>
        <FormItem label="现有工作负载"></FormItem>
        <Table bordered :data-source="dataSource" :columns="detailColumns" :pagination="false"> </Table>
      </Card>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { Drawer, Card, Row, Col, FormItem, Table } from 'ant-design-vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { getLinkDetail } from '/@/api/upgrade-center/grayscale/linkManagement/linkManagement';
import { detailColumns } from '/@/views/upgrade-center/grayscale/linkManagement/data';
const linkName = ref();
const linkDesc = ref();
const routeLinkKey = ref();
const visible = ref(false);
const dataSource = ref();
const openDetail = async (id) => {
  visible.value = true;
  let res = await getLinkDetail(id);
  linkName.value = res.name;
  linkDesc.value = res.description;
  routeLinkKey.value = res.routeLinkKey;
  dataSource.value = res.componentList;
};
const onClose = () => {
  visible.value = false;
};

defineExpose({ openDetail });
</script>
